<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">应急抢修</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/Preservation' }">重要保电</el-breadcrumb-item>
        <el-breadcrumb-item>保电监督管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :rules="rules[item.id]" :prop="item.id">
            <LsdForm :compData="item" :form="form" @node-click="handleSelectTree(arguments,item)" @change="selectChange(arguments, item)" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" :paginationAtrrs="table.paginationAtrrs" :compRef="table.compRef" ref="gjxm"
        @pageChange="handleSizeChange" :columns="table.columns" :title="table.title" :actions="table.actions"
        :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <!-- 弹窗信息 -->
    <LsdDialog :dialogConfig="dialogConfig" @handleBtn="handleBtn" @close="close">
      <LsdTable slot="dialog" :compRef="inJobList.compRef" ref="gjxm" :columns="inJobList.columns"
        :tableData="inJobList.tableData" :tableAttr="inJobList.tableAttr" :isShowPage="inJobList.isShowPage"
        :isSequenceFlag="inJobList.isSequenceFlag" :autoHeight="inJobList.autoHeight" />
    </LsdDialog>
  </div>
</template>

<script>
import { electricityProtection, onDuty } from "@/api/emergencyRepair.js";
import { getDictByGroup } from "@/api/common.js";
export default {
  components: {},
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      // 筛选信息
      formData: [
        {
          elType: "select",
          id: "bdlx",
          label: "保电类型",
          attrs: {
            value: "",
            size: "small",
            "collapse-tags": true,
            clearable: true
          },
          options: []
        },
        {
          elType: "dateTimePicker",
          id: "bdsj",
          label: "保电时间",
          attrs: {
            value: "",
            size: "medium",
            type: "datetimerange",
            clearable: true,
            "start-placeholder": "开始日期",
            "end-placeholder": "结束日期",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      bdlx: "",
      bdsj: "",
      // 表格信息
      table: {
        isSelectFlag: false,
        compRef: "gjxm",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "保电监督管理",
        actions: [{}],
        tableData: [],
        columns: [
          {
            prop: "bdfamc",
            label: "保电方案名称",
            align: "left",
            "min-width": "230px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;text-decoration: underline;'>
                      {row.bdfamc}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "bdlx",
            label: "保电类型",
            align: "center"
          },
          {
            prop: "bddd",
            label: "保电地点",
            align: "center"
          },
          {
            prop: "bddw",
            label: "保电单位",
            align: "center"
          },
          {
            prop: "bdfw",
            label: "保电范围",
            align: "center",
            "min-width": "150px"
          },
          {
            prop: "bdkssj",
            label: "保电开始时间",
            align: "left",
            "min-width": "200px"

          },
          {
            prop: "bdjssj",
            label: "保电结束时间",
            align: "left",
            "min-width": "200px"

          },

          {
            prop: "zt",
            label: "状态",
            align: "center",
            "min-width": "100px"
            // formatter: (row, column, cellValue, index) => {
            //   if (cellValue === "0") {
            //     return "编辑中";
            //   } else if (cellValue === "1") {
            //     return "待审批";
            //   } else {
            //     return "已下发";
            //   }
            // }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            "min-width": "180px",
            render: (h, scope) => {
              return (
                <span style='color:#3561fd;cursor:pointer;margin:0 2px' {...{
                  on: {
                    click: () => {
                      this.dialogConfig.isShow = true;
                      this.onDutyList();
                    }
                  }
                }}>
                  查看到岗到位情况
                </span>

              );
            }
          }
        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        },
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      inJobList: {
        autoHeight: true,
        isSelectFlag: false, // 是否展示选择器
        compRef: "inJobList",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        resetFlag: false,
        loading: false,
        title: "",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "ry",
            label: "人员",
            align: "center"
          },
          {
            prop: "dw",
            label: "单位",
            align: "center"
          },
          {
            prop: "bm",
            label: "部门",
            align: "center"
          },
          {
            prop: "zw",
            label: "职务",
            align: "center"
          },
          {
            prop: "sfytz",
            label: "是否已通知",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { isNoticed } = row;
              if (isNoticed === "0") {
                return "否";
              } else {
                // return "否";
                return "是";
              }
            }
          },
          {
            prop: "tzfs",
            label: "通知方式",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { noticedWay } = row;
              if (noticedWay === "0") {
                return "短信通知";
              } else if (noticedWay === "1") {
                return "系统通知";
              }
            }
          },
          {
            prop: "sfqd",
            label: "是否签到",
            align: "center",
            formatter: (row, column, cellValue, index) => {
              // console.log(row)
              const { isSign } = row;

              if (isSign === "0") {
                return "否";
              } else {
                return "是";
                // return "否";
              }
            }
          },
          {
            prop: "qdsj",
            label: "签到时间",
            align: "center",
            width: "110px"
          },
          {
            prop: "qtsj",
            label: "签退时间",
            align: "center"
          },
          {
            prop: "dgsz",
            label: "到岗时长",
            align: "center"
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #dedede",
            "font-size": "16px"
          }
        }


      },

      form: {},
      multipleSelection: [],
      // 弹窗信息
      dialogConfig: {
        title: "到岗到位情况",
        isShow: false
      },
      rules: {}
    };
  },
  created() {
    this.getPageList();
  },
  mounted() {
    this.getElectricityType();

  },
  methods: {
    async getElectricityType() {
      const res = await getDictByGroup({ groupCode: "dic_bdlx" });
      const option = res.map(item => {
        return {
          label: item.dicName,
          value: item.dicCode
        };
      });
      this.formData[0].options = option;
    },
    async onDutyList() {
      const params = {
        pageNum: 1,
        pageSize: 10
      };
      const res = await onDuty(params);
      this.inJobList.tableData = res.data;
    },
    async getPageList(val) {
      let params = {
        pageNum: 1,
        pageSize: 10
      };
      if (val) {
        params = {
          ...val
        };
      }
      console.log(params, "params---");
      const res = await electricityProtection(params);
      this.table.tableData = res.data;
      this.table.paginationAtrrs.total = res.total;
    },
    // 重置
    reset() {
      this.$refs.form.clearValidate();
      this.getPageList();

    },
    // 查询
    query() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        bdlx: this.bdlx,
        bdkssj: "",
        bdjssj: ""
      };
      this.getPageList(params);
    },
    handleBtn(item) {
      this[item.id]();
    },
    handleActionClick() { },
    // 列表
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 分页
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNum = val["current-page"];
      this.pageSize = val["page-size"];
      this.getPageList();
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

/deep/ .el-table tr {
  background: none !important;
}

.box {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
